<template>
  <div class="v-workflow-list">
    <template v-if="list.length>0">
      <div v-for="(item, index) in list" :key="index" class="list-box">
        <van-row gutter="20">
          <van-col span="2">
            <div class="left-box">
              <!-- 用户头像：此处未作处理，因为不太熟悉业务数据，待沟通 -->
              <img :src="item.img" alt="" v-if="item.img" />
              <span v-if="item[userName]">
                {{ item[userName].charAt(item[userName].length - 1) }}
              </span>
            </div>
          </van-col>
          <van-col span="22">
            <div class="top-box">
              <span class="name">
                <span>{{ item[userName] }}</span>
                <span class="dept" v-if="item[taskName]">({{ item[taskName] }})</span>
              </span>
              <span 
                v-if="item[time]" 
                class="time"
              >
                {{item[time] | date('yyyy-MM-dd hh:mm')}}
              </span>
            </div>
            <slot :row="item">
              <div class="opinion" v-if="item[opinion]">{{item[opinion]}}</div>
            </slot>
            <qm-file-upload v-if="showPic && item.taskType == 'auditTask' && item.taskCode == 'usertask2' && item.handlerId" style="margin-top: 8px;" disabled ref="mobileReplyPic" :params="{
                type: 'attach',
                dataKey: item.taskId,
                bizType: 'mobileReplyPhoto',
            }" uploadId="mobileReplyPic">
            </qm-file-upload>
          </van-col>
        </van-row>
        
      </div>
    </template>
    <v-empty v-else description="未找到办理记录，请先提交申请"></v-empty>
  </div>
</template>

<script>
export default {
  name:'',  
  props:{
    // 展示的数据
    data:{
      type:Array,
      default: () => {
        return [];
      },
    },
    // 用户名
    userName:{
      type:String,
      default:'assigneeName'
    },
    // 用户单位/部门/流程环节
    taskName:{
      type:String,
      default:'taskName'
    },
    // 时间
    time:{
      type:String,
      default:'finishTime'
    },
    // 意见
    opinion:{
      type:String,
      default:'opinionText'
    },
    showPic:{
      type:Boolean,
      default:()=>{
        return false;
      }
    }
  },
  data () {
    return {
      list:[],
    }
  },
  computed: {},
  watch: {
    data:{
      handler(val){
        // 让数据倒序
        let newArr=JSON.parse(JSON.stringify(val))
        this.list=newArr.reverse()
        this.list=this.list.filter(item=>{
          return item.taskStatus!='finished'||(item.taskStatus=='finished'&&item.handlerId)
        })
      },
      immediate:true
    }
  },
  methods: {
    
  },
}
</script>

<style lang="less" scoped>
@mainColor:#1990FF; // 步骤条主题颜色
div,span,p{
  word-break: break-all;
}
.v-workflow-list{
  .list-box{
    /deep/ .van-row{
      line-height: 30px;
      padding-top: 15px;
      .van-col--22{
        padding-bottom: 15px;
        border-bottom: 1px solid #E9ECF0;
      }
      .left-box{
        width: 30px; 
        height: 30px; 
        background-color: #4e8bfa; 
        border-radius: 50%; 
        text-align: center; 
        line-height: 30px;
        span{
          color: #fff;
        }
      }
      .top-box{
        display: flex; 
        justify-content: space-between;
        .name{
          color: #333333; 
          font-size: 16px; 
          font-weight: 600;
          display: flex;
          flex-direction: column;
          line-height: 20px;
          .dept{
            font-size: 12px;
            font-weight: 400;
          }
        }
        .time{
          color:#909DB6;
          font-size:12px;
          flex-shrink: 0;
        }
      }
      .opinion{
        min-height: 40px;
        line-height: 40px;
        background: #F5F7FA;
        padding: 0 10px;
        border-radius: 4px;
        margin-top: 8px;
      }
    }
    &:last-child{
      /deep/ .van-row .van-col--22{
        border-bottom: none;
      }
    }
  }
}
</style>